<template>
	<view>

		<view class="main">
			<image :src="url+'/assets/img/vipDetail.png'" mode=""></image>
		</view>

		<!-- 占位符 -->
		<view class="place"></view>

		<!-- <view class="foot">
			<button type="default" class="btn" @tap="toPay">立即开通VIP</button>
		</view> -->

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token'])
		},
		data() {
			return {
				url:''
			};
		},
		//分享给个人
		onShareAppMessage() {
			return {
				title: '青年交友',
				imageUrl:'https://friend.tanshishang.cn/assets/img/shareImg.png',
				path:'/pages/index/index'
			}
		},
		onLoad() {
			this.url = this.$config.API;
		},
		methods: {
			//创建订单前往支付
			async toPay() {
				try {
					let params = {
						token: this.token
					};
					let res = await this.$request.request.get('/api/user/renewal', params)
					console.log(res);
					if (res.code == 200) {
						//跳转支付页
						uni.navigateTo({
							url: '/pages/my/payInfo?orderNo=' + res.data.orderNo + '&type=0' + '&price=' + res.data.price
						})
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//返回上层
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.main {
		width: 100vw;
		height: 100vh;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.place {
		width: 100vw;
		height: 160rpx;
		background-color: #982EAC;
	}

	.foot {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: rgba($color: #ffffff, $alpha: 0.2);
		padding: 20rpx 0;

		.btn {
			width: 686rpx;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			background: linear-gradient(156deg, #796340 0%, #3D2B0D 100%);
			border-radius: 44rpx;
			font-weight: bold;
			color: #FFFFFF;
			font-size: 32rpx;
			margin: 0 auto;
		}

		.back {
			width: 100%;
			padding: 10rpx 0 0 0;
			text-align: center;
			font-size: 22rpx;
			color: #FFD791;
		}
	}
</style>
